<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>列表过滤</title>
        <script type="text/javascript" src="../../js/vue.js"></script>
    </head>
    <body>
        <div id="root">
            <!-- 遍历数组 -->
             <input type="text" placeholder="请输入名字" v-model="keyWord" />
            <ul>
                <li v-for="(p,index) in filterPersonsArr" :key="index">
                    {{p.name}} - {{p.age}} - {{p.sex}}
                </li>
            </ul>

        </div>

        <script type="text/javascript">
            Vue.config.productionTip = false  // 阻止Vue在启动时生成生产提示，不起作用，直接改了vue.js中的值
            //1.使用watch属性完成列表过滤
            // 创建Vue实例
            /*new Vue({
                el:'#root', 
                data:{ 
                    personsArr:[
                        {id:'001',name:'马冬梅',age:18,sex:'女'},
                        {id:'002',name:'周冬雨',age:19,sex:'女'},
                        {id:'003',name:'周杰伦',age:20,sex:'男'},
                        {id:'004',name:'温兆伦',age:21,sex:'男'}
                    ],
                    filterPersonsArr:[], //定义用来过滤的人名数组
                    keyWord:''
                },
                //使用监视属性进行搜索
                watch:{
                    keyWord:{
                        immediate:true, //第一次进来就搜索，保证filterPersonsArr有数据
                        handler(newVal,oldVal){
                            this.filterPersonsArr = this.personsArr.filter((p)=>{
                                return p.name.indexOf(newVal) !== -1
                            })
                        }
                    }
                }
            })*/
            //2.使用计算属性完成列表过滤
            new Vue({
                el:'#root', 
                data:{ 
                    personsArr:[
                        {id:'001',name:'马冬梅',age:18,sex:'女'},
                        {id:'002',name:'周冬雨',age:19,sex:'女'},
                        {id:'003',name:'周杰伦',age:20,sex:'男'},
                        {id:'004',name:'温兆伦',age:21,sex:'男'}
                    ],
                    keyWord:'' // 接收用户输入值
                },
                computed:{
                    //只需要get，使用简写形式
                    filterPersonsArr(){
                        return this.personsArr.filter((p)=>{
                            return p.name.indexOf(this.keyWord) !== -1
                        })
                    }
                }

            })
        </script>

        
    </body>
</html>